<template>
	<view class="bt" style="padding-bottom: 150rpx;">
		<view class="mlr-36 img-header mt-20 radius-10">
			<swiper class="swiper" :indicator-dots="true">
				<swiper-item v-for="(item,i) in info.store_banner" :key="i" @click="preview(info.store_banner)">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex plr-36 pb-20 mt-20 bb">
			<view class="">
				<view class="bold">
					{{info.merchant_name}}
				</view>
				<view class="size-26 mt-10">
					{{info.cate_name}}
				</view>
				<view class="size-26 mt-10">
					<text class="yellow mr-10">营业时间：</text>
					{{info.starttime}}-{{info.endtime}}
				</view>
			</view>
			<view class="text-center" @click="getColl(info.is_collect)">
				<view class="img-collection" v-show="!info.is_collect==1">
					<image src="../../static/icon-collection.png" mode=""></image>
				</view>
				<view class="img-collection" v-show="info.is_collect==1">
					<image src="../../static/icon-collection-1.png" mode=""></image>
				</view>
				<view class="size-26 gray-2">
					{{info.is_collect==1?'已收藏':'收藏'}}
				</view>
			</view>
		</view>
		<view class="pl-27 pr-36 ptb-20 flex ">
			<view class="u-flex-1 flex_l" @click="goMap(info.lat,info.lng)">
				<view class="img-map">
					<image src="../../static/icon-map.png" mode=""></image>
				</view>
				<view class="u-line-2 size-26 ml-10">
					{{info.address}}
				</view>
			</view>
			<view class="ml-40" @click="show=true">
				<view class="img-phone">
					<image src="../../static/icon-phone.png" mode=""></image>
				</view>
				<view class="size-26">
					电话
				</view>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="pt-30">
			<view class="plr-36 size-34 bold">
				优惠套餐
			</view>
			<view class="ml-36 mt-20 pb-20 pr-36 flex bb" @click="toDetail(item.id)" v-for="(item,i) in info.child" :key="i">
				<view class="">
					<view class="bold">
						{{item.name}}
					</view>
					<view class="size-26 mt-9">
						{{item.description}}
					</view>
					<view class="size-26 gray-2 mt-9">
						消费{{item.custom_sales}}
					</view>
				</view>
				<view class="flex flex-column flex-bottom ml-20">
					<view class="">
						<text class="size-26 red">￥</text>
						<text class="size-34 red">{{item.set_meal_price}}</text>
						<text class="size-24 gray-2 ml-10" style="text-decoration: line-through;">￥{{item.market_price}}</text>
					</view>
					<view style="width: 150rpx;" class="bg-yellow white ptb-9 center radius-10 mt-10" @click.stop="tobuy(item.id)">
						购买
					</view>
				</view>
			</view>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;"></view>
		<view class="pt-30" v-if="info.comment&&info.comment.length>0">
			<view class="plr-36 flex">
				<view class="size-34 bold">
					用户评价
				</view>
				<view class="" @click="toComment">
					查看更多
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
			<comItem :item="item" v-for="(item,i) in info.comment" :key="i"></comItem>
		</view>
		<view class="w100" style="height: 20rpx;background: #f8f8f8;" v-if="content"></view>
		<view class="" v-if="content">
			<view class="size-34 plr-36 ptb-20 bold bb">
				商家详情
			</view>
			<view class="">
				<rich-text :nodes="content"></rich-text>
				<!-- <image :src="item" v-for="(item,i) in info.store_detail" :key='i' mode=""></image> -->
			</view>
			<!-- <view class="gray-2 mt-20">
				服务项目
			</view>
			<view class="mt-10">
				自备清洁工具
			</view> -->
		</view>

		<!-- 	<view class="ml-36 pr-36 ptb-20 bb">
			<view class="gray-2 mt-20">
				特色服务
			</view>
			<view class="mt-10">
				自备清洁工具
			</view>
		</view> -->
		<view class="fixed-bottom ptb-30 bg-white">
			<u-button type="warning" @click="show=true">电话咨询</u-button>
		</view>
		<u-action-sheet :list="list" @click="goPhone" v-model="show" :cancel-btn="true"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iscollection: false,
				store_id: '',
				info: {},
				list:[],//电话列表
				show:false,
				content:''
			}
		},
		onLoad(option) {
			this.store_id = option.store_id
			this.init()
		},
		methods: {
			preview(imgs) {
				uni.previewImage({
					urls: imgs,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			init() {
				this.$http('/api/shop/shopInfo', {
					shop_id: this.store_id
				}).then(data => {
					console.log(data);
					uni.setNavigationBarTitle({
						title: data.merchant_name
					});
					this.info = data
					this.content = data.store_detail.replace(/\<img/gi, '<img style="width:100%;height:auto"');
					data.link_tel.forEach(item=>{
						this.list.push({text:item})
					})
				})
			},
			toComment() {
				uni.navigateTo({
					url: '/pages/home/comment?store_id=' + this.store_id
				})
			},
			getColl(type) {
				if (type == 1) {
					this.$http('/api/common/cancel_collect', {
						shop_id: this.store_id
					}).then(data => {
						this.init()
					})
				} else {
					this.$http('/api/common/collect', {
						shop_id: this.store_id
					}).then(data => {
						this.init()
					})
				}
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/home/good-detail?goods_id=' + id
				})
			},
			tobuy(id) {
				uni.navigateTo({
					url: '/pages/home/place-order?goods_id=' + id
				})
			},
			goPhone(index) {
				uni.makePhoneCall({
					phoneNumber: this.list[index].text //仅为示例
				});
			},
			goMap(latitude, longitude) {
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-warning-hover {
		background-color: $yellow !important;
	}

	.img-header {
		image {
			width: 100%;
			height: 320rpx;
			border-radius: 10rpx;
		}
	}

	.img-collection {
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.img-map {
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.img-phone {
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>
